<template>
  <div id="wrap">
    <h6 @touchmove.prevent @mousewheel.prevent :class="{zzc:goodsNameList.length}"></h6>
    <!-- 头部 -->
    <div id="index-search">
      <span>凡客</span>
      <div id="mySearch" @touchmove.prevent @mousewheel.prevent>
        <i class="iconfont icon-sousuo1"></i>
        <input v-model="value" @keyup="onSearch" placeholder="请输入搜索关键词" />
        <ul class="search-list" v-show="goodsNameList.length">
          <li v-for="item in goodsNameList" :key="item.gid">
            <router-link :to="'/goodsDetails/'+item.gid">{{item.gname}}</router-link>
          </li>
        </ul>
      </div>
      <span>
        <i class="iconfont icon-xinxi"></i>
      </span>
    </div>
    <div id="index-content">
      <!-- 轮播 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
      <!-- 模块轮播 -->
      <div class="index-nav">
        <a href="#">
          <img src="../assets/image/chonzhi.jpg" alt />
        </a>
        <div class="yhq-lunbo swiper-container">
          <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="(item,index) in images2" :key="index">
              <img :src="item" alt />
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <!-- 新品 -->
      <div class="new-goods">
        <h3>
          <i class="iconfont icon-app"></i>新品上新
        </h3>
        <swiper ref="mySwiper" :options="swiperOptions1">
          <swiper-slide v-for="(item,index) in newgoods" :key="index">
            <router-link to="/fenlei/fenleiList/1">
              <img :src="item" alt />
            </router-link>
          </swiper-slide>
        </swiper>
      </div>
      <!-- 秒杀 -->
      <div class="second-kill">
        <div class="kill-head">
          <div class="kill-left">
            <span>
              <i class="iconfont icon-naozhong"></i>
              <em>每日秒杀&nbsp;|&nbsp;</em>
            </span>
            <span>
              <em>{{timeOut}}</em>点场
            </span>
          </div>
          <div class="kill-countDown">
            距结束
            <span>{{h}}</span> :
            <span>{{m}}</span> :
            <span>{{s}}</span>
          </div>
        </div>
        <div class="kill-lunbo">
          <swiper ref="mySwiper" :options="swiperOptions1">
            <swiper-slide v-for="(item,index) in MSgoods" :key="index">
              <router-link :to="'/goodsDetails/'+item.gid">
                <img :src="item.gimg" alt />
                <p>
                  <span>充值后￥{{parseInt(item.gprice*0.1)}}</span>
                  <del>￥{{item.gprice}}</del>
                </p>
              </router-link>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="home-goods-list">
        <h3>
          <i class="iconfont icon-app"></i>每日推荐
        </h3>
        <ul class="goods-list">
          <li v-for="(item1,index) in goodsList" :key="index">
            <div class="goods_lunbo1">
              <swiper ref="mySwiper" :options="goodsLunbo1">
                <swiper-slide v-for="(itemL,indexL) in goodsLunbo[index]" :key="indexL">
                  <img :src="itemL.src" alt />
                </swiper-slide>
              </swiper>
            </div>
            <div class="goods_lunbo2">
              <swiper ref="mySwiper" :options="goodsLunbo2">
                <swiper-slide v-for="item2 in item1" :key="item2.gid">
                  <router-link :to="'/goodsDetails/'+item2.gid">
                    <img :src="item2.gimg" alt />
                    <p>{{item2.gname}}</p>
                    <p>售价:￥{{item2.gprice}}</p>
                    <p>
                      充值相当于:
                      <span>￥{{item2.gprice * 0.5}}</span>
                    </p>
                  </router-link>
                </swiper-slide>
              </swiper>
            </div>
          </li>
        </ul>
      </div>
      <!-- 更多&回顶部 -->
      <div class="moreAndgoBack">
        <router-link to="/fenlei">
          查看更多&nbsp;&nbsp;
          <i class="iconfont icon-jiantou1-copy"></i>
        </router-link>
        <a @click.prevent="goTop" href="#">
          返回顶部&nbsp;&nbsp;
          <i class="iconfont icon-jiantou-up"></i>
        </a>
      </div>
      <!-- 底部 -->
      <foot></foot>
    </div>
  </div>
</template>

<script>
import foot from "@/components/common/foot";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import getGoods from "@/api/getGoods.js";
export default {
  data() {
    return {
      value: "",
      images: [
        require("@/assets/image/lunbo/lunbo1.jpg"),
        require("@/assets/image/lunbo/lunbo2.jpg"),
        require("@/assets/image/lunbo/lunbo3.jpg"),
        require("@/assets/image/lunbo/lunbo4.jpg"),
        require("@/assets/image/lunbo/lunbo5.jpg"),
        require("@/assets/image/lunbo/lunbo6.jpg"),
        require("@/assets/image/lunbo/lunbo7.jpg")
      ],
      images2: [
        require("@/assets/image/yhq1.jpg"),
        require("@/assets/image/yhq2.jpg"),
        require("@/assets/image/yhq3.jpg")
      ],
      newgoods: [
        "https://mi1.vanclimg.com/oms/2020_5_9_10_51_4_6269_326x206.jpg",
        "https://mi1.vanclimg.com/oms/2020_4_26_15_40_50_5018_326x206.jpg",
        "https://mi2.vanclimg.com/oms/2020_4_24_10_39_8_8836_326x206.jpg",
        "https://mi2.vanclimg.com/oms/2019_9_17_16_44_59_7062_326x206.jpg",
        "https://mi1.vanclimg.com/oms/2020_3_19_11_55_24_6149_326x206.jpg",
        "https://mi1.vanclimg.com/oms/2020_4_3_15_36_38_3400_326x206.jpg",
        "https://mi2.vanclimg.com/oms/2019_9_17_16_44_59_8315_326x206.jpg",
        "https://mi.vanclimg.com/oms/2019_9_17_16_45_0_300_326x206.jpg"
      ],
      goodsList: [],
      MSgoods: [],
      goodsNameList: [],
      goodsLunbo: [],
      swiperOptions: {
        watchSlidesProgress: true,
        watchSlidesVisibility: true,
        slidesPerView: "auto", //容器同时显示的数量
        spaceBetween: 20 //间距
      },
      swiperOptions1: {
        slidesPerView: "auto", //容器同时显示的数量
        spaceBetween: 6 //间距
      },
      goodsLunbo1: {
        slidesPerView: "auto",
        freeMode: true,
        // loop: true,//被
        watchSlidesProgress: true,
        watchSlidesVisibility: true
      },
      goodsLunbo2: {
        slidesPerView: "auto",
        spaceBetween: 8,
        watchSlidesProgress: true,
        watchSlidesVisibility: true
      },
      timeOut: "",
      h: "",
      m: "",
      s: "",
      myTimer: null
    };
  },
  components: {
    Swiper,
    SwiperSlide,
    foot
  },
  mounted() {
    setInterval(() => {
      this.countDown();
    }, 1000);
  },
  created() {
    this.getgoodsList();
    this.getMSgoods();
    this.getlunbo();
  },
  methods: {
    async getlunbo() {
      try {
        let p = await getGoods.getLunbo();
        this.goodsLunbo = p.data.data;
      } catch (err) {
        this.$toast.fail(err + "");
      }
    },
    async getgoodsList() {
      try {
        let p = await getGoods.getGoods(999);
        if (p.data.flag) {
          this.goodsList = p.data.data
        }
      } catch (err) {
        this.$toast.fail(err+"");
      }
    },
    async getMSgoods() {
      try {
        let p = await getGoods.getGoods();
        if (p.data.flag) {
          let king = "";
          let i = 0;
          while (i < 7) {
            let num = Math.floor(Math.random() * 360);
            if (num != king) {
              this.MSgoods.push(p.data.data[num]);
              i++;
              king = num;
            }
          }
        }
      } catch (err) {
        this.$toast.fail(err+"");
      }
    },
    onSearch() {
      if (this.value) {
        if(this.myTimer != null){
          window.clearTimeout(this.myTimer)
          this.myTimer = null
        }
        this.myTimer = setTimeout(async ()=>{
          try {
          let p = await getGoods.searchGoods(this.value.trim());
          if (p.data.flag) {
            this.goodsNameList = p.data.data;
          } else {
            this.goodsNameList = [{ gname: "商品正在努力上架..." }];
          }
        } catch (err) {
          this.$toast.fail(err+"");
        }
        },300)
      } else {
        this.goodsNameList = [];
      }
    },
    countDown() {
      // 9,12,15,20,00场次倒计时
      let date = new Date();
      let hNow = date.getHours();
      let mNow = date.getMinutes();
      let sNow = date.getSeconds();
      if (hNow < 9) {
        this.timeOut = 0;
        this.h = 8 - hNow;
      } else if (hNow < 12) {
        this.timeOut = 9;
        this.h = 11 - hNow;
      } else if (hNow < 15) {
        this.timeOut = 12;
        this.h = 14 - hNow;
      } else if (hNow < 20) {
        this.timeOut = 15;
        this.h = 19 - hNow;
      } else if (hNow < 24) {
        this.timeOut = 20;
        this.h = 23 - hNow;
      }
      this.h = this.getTime(this.h);
      this.m = this.getTime(59 - mNow);
      this.s = this.getTime(59 - sNow);
    },
    getTime(num) {
      if (num < 10) {
        num = "0" + num;
      }
      return num;
    },
    goTop() {
      this.$("body,html").animate(
        {
          scrollTop: 0
        },
        1000
      );
    },
    getGoods() {}
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/home";
</style>
